<template>
  <div class="container">
    <div class="user-index width">
      <!-- 左侧按钮 -->
      <div class="left flex-direction-column" v-if="isMyself">
        <el-button class="el-btn" size="small" circle title="写文章" @click="$router.push('/add-article')">
          <i class="iconfont icon-weibiaoti--"></i>
        </el-button>
        <el-button class="el-btn" size="small" circle title="添加导航" @click="$router.push('/navigation-add')">
          <i class="iconfont icon-tianjia-daohang"></i>
        </el-button>
      </div>
      <!-- 中间以及右侧部分 -->
      <div class="middle-right display-flex">
        <div class="middle">
          <!-- 中间头部：头像、描述、按钮 -->
          <AutorInfo :authorInfo="authorInfo" @updateAuthorInfo="getInfo" />
          <!-- 导航 -->
          <el-menu
            class="menu"
            :default-active="activeItem"
            mode="horizontal"
            text-color="black"
            active-text-color="pink"
            router
          >
            <el-menu-item index="index">文章列表</el-menu-item>
            <el-menu-item index="draft" v-if="isMyself">我的草稿</el-menu-item>
            <el-menu-item index="concern">关注列表</el-menu-item>
            <el-menu-item index="favorites">收藏列表</el-menu-item>
            <el-menu-item index="myNav" v-if="isMyself">我的导航</el-menu-item>
            <el-menu-item index="myNavCategory" v-if="isMyself">导航分类</el-menu-item>
          </el-menu>
          <!--路由出口 -->
          <router-view />
        </div>
        <!-- 右侧列表 -->
        <RightList :authorData="authorInfo" />
      </div>
    </div>
  </div>
</template>

<script>
import RightList from './components/right-list.vue'
import AutorInfo from './components/author-info.vue'
import { getAuthorInfo } from '@/api/user'
import { isUserLoggedIn } from '@/utils/auth'
import { mapGetters } from 'vuex'
export default {
  name: 'UserIndex',
  components: {
    RightList,
    AutorInfo
  },
  data() {
    return {
      authorInfo: {}
    }
  },
  created() {
    this.getInfo()
  },
  computed: {
    getUserId() {
      return this.$route.params.id
    },
    activeItem() {
      var path = this.$route.path.split('/')
      var activeName = path[path.length - 1]
      return `${activeName}` || 'index'
    },
    isLoggedIn() {
      return isUserLoggedIn()
    },
    isMyself() {
      return this.isLoggedIn && this.user_id === this.getUserId
    },
    ...mapGetters(['user_id'])
  },
  methods: {
    // 获取作者信息
    async getInfo() {
      try {
        const res = await getAuthorInfo(this.$route.params.id)
        console.log(res)
        if (res.code === 200) {
          this.authorInfo = res.data
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f2f3f5;
}
.user-index {
  position: relative;
  padding-top: 80px;
  .left {
    position: fixed;
    top: 50%;
    left: 170px;
    transform: translateY(-50%);
    .el-btn {
      width: 50px;
      height: 50px;
      margin-left: 0px;
      color: #fff;
      background-color: #909399;
      &:nth-child(2) {
        margin-top: 20px;
      }
    }
  }

  .menu {
    background-color: #fff;
  }

  ::v-deep .el-menu {
    background-color: rgba(158, 167, 164, 0);
    border-bottom: none;
  }

  ::v-deep .el-menu-item:hover {
    background-color: transparent !important; /* 消除 hover 背景色 */
    color: skyblue;
  }

  ::v-deep .el-menu-item:focus {
    background-color: transparent !important; /* 浅黄色背景 */
  }

  .el-button:hover {
    color: pink;
    transform: scale(1.1);
  }

  .middle-right {
    width: 1000px;
    min-height: 100vh;
    margin: 0 auto;
  }
  .btn {
    width: 40px;
    height: 40px;
  }
  .middle {
    width: 666px;
    margin-right: 20px;
    margin-bottom: 20px;
  }
}
</style>
